import {
	Button,
	List,
	DatePicker,
	NavBar,
	Popup,
	Toast,
	Dialog,
} from 'antd-mobile'
import classNames from 'classnames'
import {
	getUseProfile,
	updateUserProfile,
	updatePhoto,
} from '@/store/actions/profile'
import { logout } from '@/store/actions/login'
import { useInitialState } from '@/utils/use-initial-state'
import EditInput from './components/EditInput'
import EditList from './components/EditList'

import styles from './index.module.scss'

import { useState, useRef } from 'react'
import { useHistory } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import dayjs from 'dayjs'

const Item = List.Item
//使用：
//1、点击修改昵称
type InputPopup = {
	type: '' | 'name' | 'intro'
	value: string
	visible: boolean
}

type ListPopup = {
	type: '' | 'gender' | 'photo'
	visible: boolean
}

const ProfileEdit = () => {
	//123
	const history = useHistory()
	const dispatch = useDispatch()
	const { userProfile } = useInitialState(getUseProfile, 'profile')
	// 控制修改昵称弹出层的显示或隐藏
	// const [inputVisible, setInputVisible] = useState(false)
	const [inputPopup, setInputPopup] = useState<InputPopup>({
		// type 属性：用于告诉 EditInput 组件，当前修改的是昵称还是简介
		type: '', // 'name' or 'intro'
		// 当前值
		value: '',
		// 展示或隐藏状态
		visible: false,
	})

	// 控制头像、性别弹出层的显示或隐藏
	const [listPopup, setListPopup] = useState<ListPopup>({
		type: '',
		visible: false,
	})

	// 打开修改昵称 或 简介 的弹出层
	// InputPopup['type'] ==> TS 中的索引查询类型
	const onInputShow = (
		type: InputPopup['type'],
		value: InputPopup['value']
	) =>
		setInputPopup({
			type,
			value,
			visible: true,
		})

	//隐藏
	const onInputHide = () => {
		setInputPopup({
			type: 'name',
			value: name,
			visible: false,
		})
	}

	//创建一个ref对象，拿到file标签 并且隐藏
	const fileRef = useRef<HTMLInputElement>(null)
	// 生日日期选择器的展示或隐藏
	const [showBirthday, setShowBirthday] = useState(false)

	//更新用户昵称
	// InputPopup['type'] ==> TS 中的索引查询类型
	const onUpdateProfile = async (
		type: 'name' | 'intro' | 'gender' | 'photo' | 'birthday',
		value: string
	) => {
		if (type === 'photo') {
			// 单独处理修改头像的逻辑 - 来弹窗让用户选择图片
			// console.log('修改头像了')
			fileRef.current?.click()
		} else {
			// 修改昵称   // 昵称、简介、性别
			await dispatch(updateUserProfile({ [type]: value }))
			// 修改简介
			// dispatch(updateUserProfile({ intro }))
			Toast.show({
				content: '更新成功',
				duration: 1000,
			})
			// 关闭弹出层
			onInputHide()
			// onListPopupHide()
		}
	}

	//简介的信息
	// const onIntroShow = (value: string) => {
	// 	setInputPopup({
	// 		type: 'intro',
	// 		value: 'intro',
	// 		visible: true,
	// 	})
	// }

	//显示    // 打开修改 性别或头像 的弹出层
	const onListPopupShow = (type: ListPopup['type']) => {
		setListPopup({
			type,
			visible: true,
		})
	}

	//隐藏   // 打开修改 性别或头像 的弹出层
	const onListPopupHide = () => {
		setListPopup({
			type: '',
			visible: false,
		})
	}

	//修改头像事件
	const onChangePhoto = async (e: React.ChangeEvent<HTMLInputElement>) => {
		console.log('选择的头像为：', e.target.files)
		if (!e.target.files) {
			return Toast.show({
				content: '请选择要上传的头像',
				duration: 1000,
			})
		}

		const formData = new FormData()
		formData.append('photo', e.target.files[0])
		//触发dispatch
		await dispatch(updatePhoto(formData))

		onListPopupHide()
		Toast.show({
			content: '上传成功',
			duration: 600,
		})
	}

	//更新生日
	const onUpdateBirthday = (value: Date) => {
		// console.log('onUpdateBirthday', dayjs(value).format('YYYY-MM-DD'))
		const formatBirthday = dayjs(value).format('YYYY-MM-DD')
		onUpdateProfile('birthday', formatBirthday)
	}

	//退出登录
	const onLogout = () => {
		// 注意：如果需要自定义按钮的样式和文字内容，
		//需要，使用 .show() 方法来模拟 confirm
		Dialog.show({
			title: '温馨提示',
			content: '亲，您确定要退出吗？',
			// 表示：再点击 actions 对应按钮时关闭
			closeOnAction: true,
			// 表示：点击遮罩层关闭
			closeOnMaskClick: true,
			// 注意：actions 的数据类型是一个数组
			//      并且， 如果要指定的两个按钮在同一行，需要在使用一个数组来包裹两个对象
			actions: [
				[
					{
						key: 'cancel',
						text: '取消',
						style: {
							color: '#999',
						},
					},
					{
						key: 'confirm',
						text: '确认',
						onClick: () => {
							dispatch(logout())
							history.push('/login')
						},
					},
				],
			],
		})
	}

	const { /*id,*/ photo, name, gender, birthday, intro } = userProfile
	return (
		<div className={styles.root}>
			<div className='content'>
				{/* 标题 */}
				<NavBar
					className='nav-bar'
					onBack={() => history.go(-1)}
					style={{
						'--border-bottom': '1px solid #F0F0F0',
					}}
				>
					个人信息
				</NavBar>

				<div className='wrapper'>
					{/* 列表 */}
					<List className='profile-list'>
						{/* 列表项 */}
						<Item
							// extra 表示右侧的额外信息
							extra={
								<span className='avatar-wrapper'>
									<img
										width={24}
										height={24}
										src={
											photo ||
											'http://toutiao.itheima.net/images/user_head.jpg'
										}
										alt=''
									/>
								</span>
							}
							arrow
							onClick={() => onListPopupShow('photo')}
						>
							头像
						</Item>
						<Item
							arrow
							extra={name}
							onClick={() => onInputShow('name', name)}
						>
							昵称
						</Item>
						<Item
							arrow
							extra={
								<span className={classNames('intro', 'normal')}>
									{intro || '未填写'}
								</span>
							}
							onClick={() => onInputShow('intro', intro ?? '')}
						>
							简介
						</Item>
					</List>

					<List className='profile-list'>
						<Item
							arrow
							extra={gender + '' === '0' ? '男' : '女'}
							onClick={() => onListPopupShow('gender')}
						>
							性别
						</Item>
						<Item
							arrow
							extra={birthday}
							onClick={() => setShowBirthday(true)}
						>
							生日
						</Item>
					</List>

					<DatePicker
						value={new Date(birthday)}
						visible={showBirthday}
						title='选择年月日'
						min={new Date(1900, 0, 1, 0, 0, 0)}
						max={new Date()}
						onClose={() => setShowBirthday(false)}
						// 当点击确定按钮时触发，
						//通过参数可以拿到当前选中的日期（ 注意：JS 中的 Date 对象 ）
						onConfirm={onUpdateBirthday}
					/>

					{/* 创建 input[type=file] 标签 */}
					<input
						ref={fileRef}
						type='file'
						style={{ display: 'none' }}
						onChange={onChangePhoto}
					/>
				</div>

				<div className='logout'>
					<Button className='btn' onClick={onLogout}>
						退出登录
					</Button>
				</div>
			</div>

			{/* 修改昵称的弹窗层 */}
			{/* 
        解决无法正常展示简介信息的Bug的第 2 种方案
      */}
			{/* <Popup visible={inputPopup.visible} position="right" destroyOnClose> */}
			<Popup visible={inputPopup.visible} position='right'>
				{/* 
          解决无法正常展示简介信息的Bug的第 3 种方案：利用 key 来解决
        */}
				<EditInput
					key={inputPopup.type}
					type={inputPopup.type}
					value={inputPopup.value}
					onClose={onInputHide}
					onUpdateProfile={onUpdateProfile}
				/>
			</Popup>

			{/* 修改 头像或性别 的弹出层 */}
			<Popup visible={listPopup.visible} onMaskClick={onListPopupHide}>
				<EditList
					onClose={onListPopupHide}
					type={listPopup.type}
					onUpdateProfile={onUpdateProfile}
				/>
			</Popup>
		</div>
	)
}

export default ProfileEdit
